import React, { useState, useEffect } from 'react'
import { Search, Toast, Tag } from 'react-vant';
import style from "./homesearch.module.scss";
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
const Index: React.FC = () => {
    const navigate = useNavigate();
    const [wd, setWd] = useState('');
    const [historylist, setHistorylist] = useState([])
    const [hisList, setHisList] = useState<string[]>(
        JSON.parse(localStorage.getItem('historylist') || '[]')
    )
    const search = async (value: string) => {
        setWd(value)
        console.log(value);
        
        const index = hisList.lastIndexOf(value)
        if (index > -1) {
            hisList.splice(index, 1)
            setHisList(hisList)
        }
        hisList.unshift(value)
        localStorage.setItem('historylist', JSON.stringify(hisList))
        if (value.trim()!== '') {
<<<<<<< HEAD
            const res = await axios.get('/api/date', {params: {wd: value }})
            console.log(res);
            const { data } = res.data
            console.log(data);

            setHistorylist(data)
=======
            const res = await axios.get('/api/city', {params: {hospital: value}})
            console.log(res.data)
            setHistorylist(res.data)
>>>>>>> cjc
        }
    }
    const clear = () => {
        localStorage.removeItem('historylist')
        setHisList([])
    }
  useEffect(()=>{

  },[hisList])
    return (
        <div >
            <div className={style.top}>
                <div  onClick={() => navigate(-1)}>&lt;</div>
                <Search
                    style={{
                        width: '90%',
                        marginLeft: '20px',
                    }}
                    value={wd}
                    
                    onSearch={search}
                    background={'blue'}
                    
                    shape="round"
                    placeholder="请输入搜索关键词"
                />
            </div>
           <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'10px 20px',borderBottom:'1px solid #ccc'}}> <h5>历史搜索</h5> <div><button onClick={()=>clear()}>清除</button></div></div>
            <div className={style.Searchhistory}>
                <ul>
                    {hisList.map((item, ind) => (
                        <li key={ind} >
                            {item}
                        </li>
                    ))}
                </ul>
                
            </div>
            <div>
                {
                    historylist.length > 0 && historylist.map((item: any, index) => {
                        return <div key={index}>
                            <div className={style.title}>{item.
                                shanc}</div>
                        </div>
                    })
                }
            </div>
        </div>
    )
}

export default Index